import React, { useState } from "react";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { NavLink } from "react-router-dom";
import { useSelector } from "react-redux";

import Headers from "../../components/Headers";
import { SkinOutlined } from "@ant-design/icons";

import { Table } from "antd";

function Home() {
  const user = useSelector((state) => state.userinfo.userInfo);
  console.log(user);
  const { Header, Content, Footer, Sider } = Layout;
  function getItem(label, key, icon, children) {
    return {
      key,
      icon,
      children,
      label,
    };
  }
  const items = [
    getItem("Option 1", "1", <PieChartOutlined />),
    getItem("Option 2", "3", <DesktopOutlined />),
    getItem("Files", "9", <FileOutlined />),
  ];
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const [huan, setHuan] = useState(false);

  const asd = (val) => {
    console.log(val);
    setHuan(!huan);
  };

  const [zy, setZy] = useState("英");
  const [ss, setSs] = useState("你好");
  const zx = () => {
    setZy("中");
    setSs("hello");
  };

  //排序
  const columns = [
    
    {
      title: "排名",
      dataIndex: "key",
    },
    {
      title: "作者",
      dataIndex: "name",
    },
    {
      title: "内容量",
      dataIndex: "math",
      sorter: {
        compare: (a, b) => a.math - b.math,
        multiple: 2,
      },
    },
    {
      title: "点击量",
      dataIndex: "english",
      sorter: {
        compare: (a, b) => a.english - b.english,
        multiple: 1,
      },
    },
  ];
  const data = [
    {
      key: "1",
      name: "用魔法打败魔法",
      math: 1500,
      english: 32214,
    },
    {
      key: "2",
      name: "王多余",
      math: 2100,
      english: 22165,
    },
    {
      key: "3",
      name: "请叫我小李",
      math: 1754,
      english: 12456,
    },
    {
      key: "4",
      name: "橙皮",
      math: 1324,
      english: 10665,
    },
    {
      key: "5",
      name: "无敌臭狗熊",
      math: 1654,
      english: 10856,
    },
    {
      key: "6",
      name: "铁光头",
      math: 1724,
      english: 17665,
    },
  ];
  const onChange = (pagination, filters, sorter, extra) => {
    console.log("params", pagination, filters, sorter, extra);
  };

  return (
    <div>
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          style={{}}
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
        >
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            defaultSelectedKeys={["1"]}
            mode="inline"
            items={items}
          />
        </Sider>
        <Layout
          style={{
            background: huan ? "#000" : colorBgContainer,
            color: huan ? colorBgContainer : "#000",
          }}
        >
          <Header
            style={{ padding: 0, background: huan ? "#000" : colorBgContainer }}
          >
            头像：
            <img
              src="https://img2.baidu.com/it/u=3477957043,690324207&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500"
              style={{ width: "50px", height: "50px" }}
              alt=""
            />
            昵称:{user.username}
            <b
              style={{ marginLeft: "80%" }}
              onClick={() => {
                asd();
              }}
            >
              <SkinOutlined />
            </b>
            <b
              style={{ marginLeft: "8px" }}
              onClick={() => {
                zx();
              }}
            >
              {zy}
            </b>
          </Header>
          <Content
            style={{
              margin: "0 16px",
              background: huan ? "#000" : colorBgContainer,
              color: huan ? colorBgContainer : "#000",
            }}
          >
            <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>{ss}</Breadcrumb.Item>
            </Breadcrumb>
            <div
              style={{
                padding: 24,
                minHeight: 360,
                background: huan ? "#000" : colorBgContainer,
                borderRadius: borderRadiusLG,
                color: huan ? colorBgContainer : "#000",
              }}
            >
              <Table columns={columns} dataSource={data} onChange={onChange} pagination={false} />
            </div>
          </Content>
          <Footer
            style={{
              textAlign: "center",
              background: huan ? "#000" : colorBgContainer,
              color: huan ? colorBgContainer : "#000",
            }}
          >
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </div>
  );
}

export default Home;
